<template>
  <div class="ren">
    <h3>人气推荐</h3>
    <ul>
      <li v-for="i in hotGoodsListArr" :key="i.id" @click="gotoDetail(i)">
        <img v-lazy="i.list_pic_url" alt="" />
        <p class="p1">{{ i.name }}</p>
        <p class="p2">{{ i.goods_brief }}</p>
        <p class="p3">{{ i.retail_price | formatMoney }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Popularity",
  props: ["hotGoodsListArr"],
  data() {
    return {};
  },
  created() {
    // console.log(this);
  },
  methods: {
    gotoDetail(i) {
      this.$router.push({ path: "/xq", query: { id: i.id } });
    },
  },
};
</script>

<style lang='less' scoped>
.ren h3 {
  font-size: 18px;
  margin-top: 40px;
  text-align: center;
  margin-bottom: 20px;
}
.ren {
  li {
    width: 100%;
    background-color: #fafafa;
    margin-top: 8px;
    padding: 8px 16px;
    height: 104px;

    img {
      width: 88px;
      display: block;
      float: left;
      margin-right: 10px;
    }
    .p1 {
      font-size: 18px;
      margin-top: 10px;
    }
    .p2 {
      line-height: 40px;
      font-size: 12px;
      margin-top: 5px;
    }
    .p3 {
      line-height: 20px;
      color: #8d0000;
      font-size: 12px;
    }
  }
}
</style>